<template>
	<div class="right_header_list">
		<span class="right_header_list_title">{{ titleObj.title }}</span>
		<span class="change">
			<i class="iconfont" :class="titleObj.title_icon"></i>
			<span class="action" @click="changes">{{ titleObj.actionName }}</span>
		</span>
	</div>
	<div >
		<a class="right_list" v-for="(item, index) in records"  :href="Path+item.url" >
			<div class="right_list_pic_index" 
			:class="index == 0 ? 'redColor' : index == 1 ? 'orangeColor' : index == 2 ? 'yellowColor' : ''">{{ +index + 1 }}</div>
			<div class="right_list_descript_content">{{ item.title }}</div>
		</a>
	</div>
</template>

<script>
export default {
	props: {
		titleObj: {
			title: '',
			title_icon: '',
			actionName: ''
		},
		curentChannelId: '',
	
	},
	data() {
		return {
			src: '../img/bg.jpg',
			params: {
				pageSize: 10,
				pageNum: 1,
				orderBy: 5
			},
			records: [],
			Path:getRootPath(),
		};
	},
	mounted() {
		this.hotSort();
	},
	watch: {
		curentChannelId: {
			handler(newVal, oldVal) {
				if (newVal != oldVal) {
					this.getContentOfChannel();
				}
			},
			deep: true
		}
	},
	methods: {
		setNumber(val) {
			let value = val;
			if (value >= 1000) {
				value = value / 1000 + 'K';
			} else if (value >= 10000) {
				value = value / 1000 + 'W';
			}
			return value;
		},
		hotSort() {
			contentApi.fetchContentSearchPage(this.params, res => {
				if (res.code == '00000 00000') {
					this.records = res.data.contentPage.records;
				} else {
				}
			});
		},
		changes() {
			//
			this.params.pageNum = this.params.pageNum == 1 ? 2 : 1;
			this.hotSort();
		}
	}
};
</script>

<style>
.right_header_list {
  height: fit-content;
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
  width: 100%;
  font-size: 20px;
  font-family: PingFang SC-Medium, PingFang SC;
  color: #333333;
  line-height: 20px;
}
.right_header_list .right_header_list_title {
  font-weight: 500;
}
.right_header_list .change {
  font-size: 16px;
  font-weight: 400;
  color: #ff3333;
  cursor: pointer;
}
.right_list {
  display: flex;
  margin-bottom: 24px;
}
.right_list .right_list_pic_index {
  width: 21px;
  height: 20px;
  font-size: 20px;
  font-family: PingFang SC-Semibold, PingFang SC;
  font-weight: 600;
  color: #999999;
  line-height: 24px;
  text-align: center;
  margin-right: 8px;
}
.right_list .redColor {
  color: #d21800;
}
.right_list .orangeColor {
  color: #ff3333;
}
.right_list .yellowColor {
  color: #ff9a03;
}
.right_list .right_list_descript_content {
  font-size: 16px;
  width: 290px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  cursor: pointer;
}
.right_list .right_list_descript_content:hover{
	color: #ff3333;
}
</style>
